<template>
    <div>
        <el-dialog title="选择连接类型" :visible.sync="dialogVisible" width="30%" :modal='false' style = "margin-left: 50%">
            <el-button type="primary" plain @click="clickColumn()">专栏列表</el-button>
            <el-button type="primary" plain @click="clickLive()">直播列表</el-button>
        </el-dialog>

        <el-dialog :title="name + '列表'" :visible.sync="dialogFormVisible" :modal='false' style = "margin-left: 25%">
            <el-input v-model="query.keyword" placeholder="输入名称搜索" class="handle-input mr10" style="width: 90%"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
            >
                <el-table-column label="选择" align="center" width="65">
                    <template scope="scope">
                        <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="媒体" width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" width="120"> </el-table-column>
                <el-table-column prop="description" label="描述" width="120" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="price" label="价格(元)" width="100"> </el-table-column>
                <el-table-column prop="create_time" label="上传时间" align="right" width="150"> </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="pageChange"
                >
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="toggleSelection()">确定设置</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import 
{ columnListData,
  smallClassListData  
} from '../../api/index';
export default {
    data() {
        return {
            query: {
                status: 1,
                page: Number(localStorage.getItem('packagelastpage') ? localStorage.getItem('packagelastpage') : 1),
                rows: 4,
                keyword: ''
            },
            dialogVisible: false, //控制弹框
            dialogFormVisible: false,
            tableData: [],
            templateSelection: "",
            pageTotal: 0,
            name: '',
            radio:''
        };
    },
    methods: {
        clickColumn() {
            this.dialogVisible = false;
            this.dialogFormVisible = true;
            this.name = '专栏';
            this.getColumnList();
        },
        clickLive() {
            this.dialogVisible = false;
            this.dialogFormVisible = true;
            this.name = '直播';
            this.getLiveList();
        },
        toggleSelection() {
            let domainname = localStorage.getItem('domainname') ? localStorage.getItem('domainname') : '';
            if (domainname == '') {
                this.$message.error('没有获取到店铺域名，请重新进入我的店铺！');
                return;
            }
            let title = this.templateSelection.title;
            if (this.name == '专栏') {
                var url = this.$front.FrontUrl + `/xuejing/product/${domainname}?id=${this.templateSelection.id}`;
            } else if (this.name == '直播') {
                var url = this.$front.FrontUrl + `/xuejing/livecontent/${domainname}?id=${this.templateSelection.id}`;
            }
            this.$emit('childByLinkValue',{ title, url });
            this.dialogVisible = false;
            this.dialogFormVisible = false;
        },
        //得到专栏列表
        getColumnList() {
            columnListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        getLiveList() {
            smallClassListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        //改变分页
        pageChange(val) {
            this.$set(this.query, 'page', val);
            if (this.name == '专栏') {
                this.getColumnList();
            } else if (this.name == '直播') {
                this.getLiveList();
            }
        },
        Search() {
            if (this.name == '专栏') {
                this.getColumnList();
            } else if ((this.name = '直播')) {
                this.getLiveList();
            }
        },
        getCurrentRow(row) {
            // 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
            this.templateSelection = row;
            //console.log(this.templateSelection)
        }
    }
};
</script>
<style scoped>
img {
    height: 80px;
    width: 80px;
}
</style>
